<template>
  <div class="major-events">
    <!-- 导航 -->
    <NavBar :title="t('mvp.coin.text2')" isFixed />
    <div class="contentview">
      <div
        v-if="!pageData.loading && pageData.list.length === 0"
        class="contentview-notdata items-center"
      >
        <Images
          class="contentview-notdata-img"
          src="/image/mvp/coin/major-events-nodata.svg"
        ></Images>
        <div class="contentview-notdata-desc">{{ t("mvp.other.zwnr") }}</div>
      </div>
      <ClientOnly v-else>
        <van-list
          v-model:loading="pageData.loading"
          :finished="pageData.finished"
          :finished-text="t('mvp.other.text4')"
          :loading-text="t('mvp.other.text11')"
          @load="onLoadList"
        >
          <Cell
            v-for="(item, index) in pageData.list"
            :key="item.id"
            :src="item.pic_path"
            :title="item.title"
            :time="item.createdTime"
            @click="jumpPage('toPlan', false, item)"
          ></Cell>
        </van-list>
      </ClientOnly>
    </div>
  </div>
</template>
<script setup name="module">
import { navigateI18nTo } from "@/utils";
import { useDateFormat } from "@vueuse/core";
import { getArticleList, getArticleDetail } from "../../../api/bdc";
import Cell from "../../../components/mvp/major-events-cell.vue";

const { t } = useI18n();
// const route = useRoute();
// console.log("页面参数:", route.query);
// firebase埋点
const firebase = useInitFirebase(); // 初始化firebase
// firebase?.logEvent('BDC_H5_FAQJump');
// 桥接
// bridge.hideToolbar(); // 调用原生app的函数
// 页面属性
const pageData = reactive({
  loading: false,
  finished: false,
  list: [],
  pageNum: 1,
  total: 0,
});
// 上啦加载
const onLoadList = () => {
  pageData.pageNum += 1;
  getListDataRequest((isAdd) => {
    if (!isAdd) {
      pageData.pageNum -= 1;
    }
  });
};
// 获取列表数据
const getListDataRequest = async (call) => {
  pageData.loading = true;
  const res = await getArticleList({
    pageNumber: pageData.pageNum,
    pageSize: 10,
    type: "79", // 类型必须是字符串
  });
  pageData.loading = false;
  if (res) {
    let majorList = [];
    // console.log("--获取文章列表--", res);
    let idx = 0;
    majorList = res.list.list.map((e, index) => {
      if (e.id == 2174152 || e.title == "BDC Whitepaper") {
        idx = index;
      }

      e.createdTime = useDateFormat(
        Number(e.createdAt),
        "YYYY-MM-DD HH:mm:ss"
      ).value;
      return e;
    });

    pageData.list = pageData.list.concat(majorList);
    // 将白皮书放到第一个
    if (idx != 0) {
      const first = pageData.list[0];
      pageData.list[0] = pageData.list[idx];
      pageData.list[idx] = first;
    }

    pageData.total = res.list.totalRow || 0;
    if (pageData.list.length >= res.list.totalRow || 0) {
      pageData.finished = true;
    }
    if (res.list.list && res.list.list.length > 0) {
      call && call(true);
    } else {
      call && call(false);
    }
  }
};

onMounted(() => {
  getListDataRequest();
});

// 点击-页面跳转
const jumpPage = async (val, isApp = false, params) => {
  // console.log("--val--", val);
  if (val === "toPlan") {
    firebase?.logEvent("BDC_H5_PlanJump");
    if (params.id) {
      const res = await getArticleDetail({ id: `${params.id}` });
      console.log("--跳转之前--", res);
      if (!res.linkUrl) {
        navigateI18nTo({
          path: "/mvp/plan/plan",
          query: { id: params.id },
        });
      }
      // 如果是跳转自己的 h5 页面,则走导航跳转
      else if (res.linkUrl.startsWith(location.origin + "/fx/")) {
        // 方案一： 路由跳转
        jumpLocalH5PageRoute(res.linkUrl);
        // 方案二： 链接加参数
        // jumpLocalH5PageUrl( res.linkUrl)
      } else if (res.linkUrl.includes("webview=1")) {
        navigateI18nTo({
          path: "/webview",
          query: { src: res.linkUrl, title: res.title },
        });
      } else {
        await navigateTo(res.linkUrl, {
          external: true,
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.major-events {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: var(--safe-area-inset-bottom);
  .contentview {
    &-notdata {
      justify-content: center;
      flex-direction: column;
      position: relative;
      top: 120 * 2px;
      &-img {
        width: 120 * 2px;
        height: 110 * 2px;
        margin-bottom: 5px;
      }
      &-desc {
        color: #999da7;
        font-size: 13 * 2px;
      }
    }
  }
}
</style>
